<template>
    <div class="order-analysis">
        <div class="row">
            <div class="col-md-12 white-box p-0">
                <div class="panel">
                    <div class="panel-heading" style="overflow: hidden">
                        Filter
                    </div>
                    <div class="row m-b-30" style="padding: 0 20px 20px 20px;">
                        <div class="col-md-2">
                            <select class="form-control" v-model="currency">
                                <option :key="'currency' + index" v-for="(currency, index) in currencies" :value="currency">{{currency}}</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <input class="form-control" v-model="physical_room_id" placeholder="physical_room_id"/>
                        </div>

                        <date-button :range="true" :defaultToNow="true" v-model="date" class="col-md-6"></date-button>
                        <span class="input-group-btn">
                              <button class="btn btn-info" type="button" @click="fetch"
                                      :disabled="tableLoading">Go</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 bg-white m-0 p-0">
                <item-table title="List" :columns="defaultColumns" :total="total" :data="data"
                            :loading="tableLoading" @sort="sort"
                            :model="'OrderAnalysis'">
                    <template slot="is_active" slot-scope="props">
                                <span class="label label-danger" v-if="!props.item.is_active">
                                    inactive
                                </span>
                        <span class="label label-success" v-else>
                                    active
                                </span>
                    </template>
                    <template slot="physical_room_id" slot-scope="props">
                        <a :href="`#/physicalroomcalendar/${props.item.physical_room_id}`" target="_blank">
                            {{props.item.physical_room_id}}
                        </a>
                    </template>
                    <template slot="average_occupancy" slot-scope="props">
                            <span>{{(props.item.average_occupancy * 100).toFixed(2) + '%'}}</span>
                    </template>
                    <template slot="total_profit" slot-scope="props">
                        <span>{{ props.item.currency + ' ' +(props.item.total_profit).toFixed(2)}}</span>
                    </template>
                    <template slot="average_profit" slot-scope="props">
                        <span>{{ props.item.currency + ' ' +(props.item.average_profit).toFixed(2)}}</span>
                    </template>
                    <template slot="potential_profit" slot-scope="props">
                        <span>{{ props.item.currency + ' ' +(props.item.potential_profit).toFixed(2)}}</span>
                    </template>
                </item-table>
                <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import DateButton from '@/components/widgets/Datepicker/DateButton'
    // utlis
    import {toJsonData} from '@/utils'
    // api
    import {orderAnalysis} from "@/api/stat";
    // config
    import columns from '@/config/columns'
    import config from '@/config'

    export default {
        name: "OrderAnalysis",
        components: {vPaginate, ItemTable, DateButton},
        created() {
            this.model = 'OrderAnalysis'
            this.defaultColumns = columns['OrderAnalysis']
            this.currencies = config.CURRENCY
        },
        data() {
            return {
                tableLoading: false,
                date: '',
                physical_room_id: '',
                currency: 'JPY',

                data: [],
                pageCount: 1,
                page: 1,
                total: 0,
                orderBy: '-physical_room_id'
            }
        },
        methods: {
            fetch() {

                if (!this.date.length) {
                    return $.toast({
                        heading: 'Type date range',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error',
                    })
                }

                let start = this.date.split('/')[0]
                let end = this.date.split('/')[1]

                if (start === end) {
                    return $.toast({
                        heading: 'Type date range',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error',
                    })
                }

                let params = {
                    currency: this.currency,
                    physical_room_id: this.physical_room_id,
                    start,
                    end,
                    page: this.page,
                }

                if (!this.physical_room_id.trim().length) {
                    delete params['physical_room_id']
                }
                this.tableLoading = true
                orderAnalysis(params).then( res => {
                    this.tableLoading = false
                    this.data = res.data.list
                    this.page = res.data.page.number
                    this.total = res.data.page.total
                    this.pageCount = res.data.page.range
                } ).catch( e => {
                    this.tableLoading = false
                })
            },
            changePage(page) {
                this.page = page
                this.fetch()
            },
            sort() {
            }

        },

    }
</script>

<style lang="stylus">

</style>